html {background-color:#0e0e0e;}
body {
  background-image:url(../image/bg-body.jpg);
  background-color:#161616;
  color:#555;
  text-shadow:0 1px 0 rgba(0,0,0,0.1);
  font-size:small;
  font-family:'roboto',Helvetica,Arial,sans-serif;
  overflow-x:hidden;
  overflow-y:scroll;
}
#layout {
  background:url(../image/shadow.png);
  background:-moz-radial-gradient(center center,circle cover,hsla(0,0%,0%,.0) 0%,hsla(0,0%,3%,9) 100%)no-repeat;
  background:-webkit-gradient(radial,center center,0,center center,800,from(hsla(0,0%,0%,.0)),to(hsla(0,0%,3%,9)) );
  background:-o-radial-gradient(center,ellipse cover,rgba(0,0,0,0) 0%,rgba(0,0,0,0.85) 100%);
  background:-ms-radial-gradient(center,ellipse cover,rgba(0,0,0,0) 0%,rgba(0,0,0,0.85) 100%);
  background:radial-gradient(ellipse at center,rgba(0,0,0,0) 0%,rgba(0,0,0,0.85) 100%);
  filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000',endColorstr='#d9000000',GradientType=1 );
  margin:0 !important;
  padding:0 !important;
}
header.header {
  display:block;
  background:none;
  -webkit-border-radius:none;
  -moz-border-radius:none;
  border-radius:none;
  -webkit-box-shadow:none;
  -moz-box-shadow:none;
  box-shadow:none;
}
header.header section.header11 .nav a {
  font:bold 12px/12px verdana,'Helvetica Neue',arial,sans serif;
  text-align:center;
  text-shadow:none;
  border-right:1px solid #333;
  margin:0 auto;
  padding:123px 20px 8px;
}
header.header section.header11 .nav {
  border-bottom:4px double #333;
  padding:123px 20px 8px;
}
#toggle-container {background:#111 url();}
#toggle-container h2.active,#toggle-container h2 {
  border:none;
  height:10px;
  margin:0;
  padding:0;
}
#header #nav a,a:hover {
  text-decoration:none;
  color:#232323;
  position:relative;
  z-index:9;
}
.footerwrap {background:#000;}
#main-wrapper {
  position:relative;
  margin:0 auto;
  padding:14px;
  height:auto;
  width:830px;
  z-index:5;
}
.tutorial {
  float:left;
  width:100%;
  margin:2em 0 0 0;
  padding:0;
  line-height:1.5em;
}
.tutorial h4 {
  font-size:1.5em;
  line-height:1.5em;
  padding:0 0 0.85em 0;
  margin:-0.4em 0 0 0;
  color:#666;
  font-weight:100 !important;
  background-image:url(../image/line-border.png);
  background-repeat:no-repeat;
  background-position:bottom left;
  font-family:arial,sans serif;
}
.tutorial h5 {
  font-size:1.3em;
  line-height:1.5em;
  padding:0 0 0.85em 0;
  margin:0.4em 0 10px 0;
  color:#666;
  font-weight:100 !important;
  background-image:url(../image/line-border.png);
  background-repeat:no-repeat;
  background-position:bottom left;
  font-family:arial,sans serif;
}
.tutorial p {margin:6px 0 0;}
.tutorial a:link,.tutorial a:visited,.tutorial a:active,.tutorial a:hover {
  text-decoration:none;
  color:rgb(68,101,122);
}
.tutorial .span26 {
  width:775px;
  padding:2em !important;
  margin:0 0 2em 0 !important;
  background:rgba(30,30,30,0.4)url();
  border:1px solid #181818;
  box-shadow:0 2px 3px #000;
  -webkit-box-shadow:0 2px 3px #000;
  float:left;
}
figure {
  text-align:center;
  background-color:#888;
  border:1px solid #a5a5a5;
  margin:1em 0 1.3em -2.05em;
  padding:10px;
}
figure.first {margin:-2px 0 1.3em -2.05em;}
figure.chid {margin:1em 0 -2em -2.05em !important;}
figure figcaption {
  margin:10px 0 0;
  font-size:86%;
  font-style:italic;
}
.post-body figure img {
  border:none;
  background:none;
  padding:0;
  -webkit-box-shadow:0 0 3px rgba(0,0,0,.7);
  -moz-box-shadow:0 0 3px rgba(0,0,0,.7);
  box-shadow:0 0 3px rgba(0,0,0,.7);
  -webkit-border-radius:0;
  -moz-border-radius:0;
  border-radius:0;
  display:block;
  margin:0 auto;
}
.span26 ul.button-group {
  position:relative;
  float:left;
  margin:18px auto 20px;
  z-index:2;
  width:100%;
}
.span26 .button-group li {
  float:left;
  position:relative;
  margin:0 auto;
  display:block;
  width:43%;
  margin:0 0 0 30px !important;
}
.span26 .button-group li a {
  position:relative;
  background:url();
  background:-moz-linear-gradient(top,rgba(56,56,56,0.3) 0%,rgba(0,0,0,0) 100%);
  background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(56,56,56,0.3)),color-stop(100%,rgba(0,0,0,0)));
  background:-webkit-linear-gradient(top,rgba(56,56,56,0.3) 0%,rgba(0,0,0,0) 100%);
  background:-o-linear-gradient(top,rgba(56,56,56,0.3) 0%,rgba(0,0,0,0) 100%);
  background:-ms-linear-gradient(top,rgba(56,56,56,0.3) 0%,rgba(0,0,0,0) 100%);
  background:linear-gradient(to bottom,rgba(56,56,56,0.3) 0%,rgba(0,0,0,0) 100%);
  filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#4d383838',endColorstr='#00000000',GradientType=0 );
  border-width:1px;
  border-style:solid;
  border-top-color:rgba(0,0,0,0.5);
  border-bottom-color:rgba(255,255,255,0.01);
  border-left-color:rgba(255,255,255,0.03);
  border-right-color:rgba(255,255,255,0.03);
  box-shadow:0 5px 12px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,0.19);
  -moz-box-shadow:0 5px 12px rgba(0,0,0,.7);
  -webkit-box-shadow:0 5px 12px rgba(0,0,0,.7);
  -webkit-transition:all .15s ease-in-out;
  -webkit-transform-origin:50% 1px;
  display:inline-block;
  white-space:nowrap;
  padding:0.7em 0;
  width:100%;
  font:normal 22px/28px "DIN-UK","roboto","Helvetica Neue",Helvetica,Arial,sans-serif;
  text-transform:uppercase;
  text-decoration:none;
  color:#3c3d3a !important;
  text-shadow:0 -1px 1px rgba(0,0,0,0.5);
}
.span26 .button-group li a span.title-button {
  clear:both;
  width:100%;
  display:block;
}
.span26 .button-group li a span {margin:0 0 0 65px;}
.span26 .button-group li a span.bottom-button {
  display:block!Important;
  font:11px/3px "roboto","Helvetica Neue",Helvetica,Arial,sans-serif;
  ;
  float:left!Important;
  color:#333431;
  padding:0 0 8px 1px;
}
.span26 .button-group li a:before {
  content:'';
  width:38px;
  height:38px;
  border-radius:100px;
  -webkit-border-radius:100px;
  overflow:hidden;
  left:13px;
  top:16px;
  position:absolute;
  z-index:1;
  background-image:url(../image/templates-Button-before.png);
  background-repeat:no-repeat;
  background-position:top center;
}
.span26 .button-group li a:after {
  content:'';
  width:16px;
  height:16px;
  left:24px;
  top:28px;
  bottom:0;
  position:absolute;
  z-index:1;
  float:left;
  background-repeat:no-repeat;
  background-image:url(../image/demo-download-big.png);
}
.span26 a.Download:after {background-position:0 0;}
.span26 a.Demo:after {background-position:-16px 0;}
.span26 .button-group li a:hover {background-color:rgba(0,0,0,.3);}
.tip {
  margin:20px 0 0 0;
  padding:20px 5px 20px 60px !important;
  color:#595959;
  text-shadow:1px 1px 0 #919191;
  font-family:'Niconne',cursive;
  background:url(http://1.bp.blogspot.com/-9Rdoiwfw4iQ/T8NJ2r8xagI/AAAAAAAAAsg/ZB59qG_0lOk/s1600/sec1.png)no-repeat left center;
  font-size:20px;
  -webkit-box-shadow:0 1px 0 rgba(255,255,255,0.3),inset 0 1px 3px rgba(0,0,0,0.2);
  -moz-box-shadow:0 1px 0 rgba(255,255,255,0.3),inset 0 1px 3px rgba(0,0,0,0.2);
  box-shadow:0 1px 0 rgba(255,255,255,0.3),inset 0 1px 3px rgba(0,0,0,0.2);
  border-radius:8px;
}
.comments {
  padding:2em;
  margin:0 auto;
  background:url('') repeat scroll 0% 0% rgba(30,30,30,0.4);
  border:2px solid rgb(102,102,102);
  box-shadow:0 0 7px black inset;
  font-size:100%;
  line-height:1.5em;
  counter-reset:number;
  color:rgb(85,85,85);
  text-shadow:0 1px 0 rgba(0,0,0,0.1);
}
pre,i[rel="pre"] {
  display:block;
  font:normal normal 12px/normal "Courier New",Courier,Monospace;
  color:#839496;
  padding:.5em .5em .5em 1em;
  background-color:#111;
  border-left:4px solid #268bd2;
  position:relative;
  overflow:auto;
  word-wrap:normal;
  white-space:pre;
}
pre code {
  display:block;
  font:inherit;
  color:inherit;
  letter-spacing:0;
  white-space:pre;
}
pre[rel="HTML"],pre[data-codetype="HTML"] {border-left-color:#4584BE;}
pre[rel="CSS"],pre[data-codetype="CSS"] {border-left-color:#5DA028;}
pre[rel="JavaScript"],pre[data-codetype="JavaScript"] {border-left-color:#bbb;}
pre[rel="JQuery"],pre[data-codetype="JQuery"] {border-left-color:#7073CF;}
pre[rel="JQuery UI"],pre[data-codetype="JQuery UI"] {border-left-color:#E36B23;}
pre[rel="XML"],pre[data-codetype="XML"] {border-left-color:#C44032;}
pre[rel*="+"],pre[data-codetype*="+"] {border-left-color:#7C814D;}
pre .comment,pre .template_comment,pre .diff .header,pre .doctype,pre .lisp .string,pre .javadoc {
  color:#586e75;
  font-style:italic;
}
pre .keyword,pre .css .rule .keyword,pre pre .winutils,pre .javascript .title,pre .method,pre .addition,pre .css .tag,pre .lisp .title {color:#859900;}
pre .number,pre .command,pre .string,pre .tag .value,pre .phpdoc,pre .tex .formula,pre .regexp,pre .hexcolor {color:#2aa198;}
pre .title,pre .localvars,pre .function .title,pre .chunk,pre .decorator,pre .builtin,pre .built_in,pre .lisp .title,pre .identifier,pre .title .keymethods,pre .id {color:#268bd2;}
pre .tag .title,pre .rules .property,pre .django .tag .keyword {font-weight:bold;}
pre .attribute,pre .variable,pre .instancevar,pre .lisp .body,pre .smalltalk .number,pre .constant,pre .class .title,pre .parent,pre .haskell .label {color:#b58900;}
pre .preprocessor,pre .pi,pre .shebang,pre .symbol,pre .diff .change,pre .special,pre .keymethods,pre .attr_selector,pre .important,pre .subst,pre .cdata {color:#cb4b16;}
pre .deletion {color:#dc322f;}
pre .tex .formula {background:#073642;}
pre.numbered {
  border-left-width:2px;
  padding-left:1em;
}
pre .line-number,pre.numbered code {
  display:block;
  line-height:16px;
}
pre .line-number {
  float:left;
  margin:0 1em 0 -1em;
  color:#586E75;
  border-right:2px solid #222;
  text-align:right;
  min-width:35px;
}
pre .line-number span {
  display:block;
  position:relative;
  padding:0 .5em 0 1em;
}
pre .line-number span:nth-child(even) {background-color:#000;}
pre .line-number span em {
  position:absolute;
  bottom:-1px;
  left:100%;
  background-color:orange;
  padding:0 2px 1px 2px;
  border:1px solid black;
  font-style:normal;
  color:black;
  display:none;
}
pre .line-number span:hover em {display:block;}
pre .line-number span:target a {
  display:block;
  color:white;
  position:relative;
  background-color:#268bd2;
  margin:0 -.5em 0 -1em;
  padding:0 .5em 0 0;
}
pre.numbered code span {line-height:12px;}
pre[data-codetype="HTML"] .line-number span:target a {background-color:#4584BE;}
pre[data-codetype="CSS"] .line-number span:target a {background-color:#5DA028;}
pre[data-codetype="JavaScript"] .line-number span:target a {background-color:#bbb;}
pre[data-codetype="JQuery"] .line-number span:target a {background-color:#7073CF;}
pre[data-codetype="JQuery UI"] .line-number span:target a {background-color:#E36B23;}
pre[data-codetype="XML"] .line-number span:target a {background-color:#C44032;}
pre[data-codetype*="+"] .line-number span:target a {background-color:#7C814D;}
pre .line-number span:target:before {
  content:"";
  display:block;
  height:150px;
  margin-top:-150px;
  visibility:hidden;
}
.bright-code pre {
  background-color:white;
  color:#657b83;
  border:1px solid #E9E7E0;
}
.bright-code pre code {color:#657b83;}
.bright-code pre .line-number {border-right-color:#6CE26C;}
.bright-code pre .line-number span a {color:#bbb;}
.bright-code pre .line-number span:nth-child(even) {background-color:#eee;}
.bright-code pre .line-number span:target,pre .line-number span:target {background:none;}
.bright-code pre .line-number span:target a {color:black;}
.bright-code .comment,.bright-code .template_comment,.bright-code .diff .header,.bright-code .doctype,.bright-code .lisp .string,.bright-code .javadoc {color:#bbb;}
pre .highlight,pre .highlight span,pre .highlight span[class],pre mark,pre mark span,pre mark span[class] {color:black;}
pre code .branch-link,pre code .branch-link:hover {
  background-color:#052127;
  color:#839496;
  text-decoration:none;
  border:1px dotted;
  line-height:12px;
}
pre.plain,.bright-code pre.plain {
  border:1px solid #ccc;
  background:none;
  padding:1.5em 2em;
  margin-left:0;
  margin-right:0;
}
